<!-- 卡片切换组件 -->
<template>
  <el-card
    shadow="never"
    class="tabchange-card"
  >
    <div class="tab-change">
      <div
        v-for="item in formOfVehicle"
        :key="item.workStatus"
        class="tab-item"
        :class="{ active: item.workStatus == activeIndex }"
        @click="tabChange(item.workStatus)"
      >
        <span class="status">{{ item.text }}</span>
        <span
          v-if="isShowNum"
          class="status-num"
          style="font-weight: bold"
        >
          {{ item.workStatus==0?zero:item.workStatus==1?one:two }}
        </span>
      </div>
    </div>
  </el-card>
</template>

<script>
// getCarTypeStatics  统计车辆接口
import { getCarTypeStatics } from '@/api/transit'
import { formOfVehicle } from '@/views/transit/formatter/formatterVehicle'
export default {
  name: 'TabChange',
  props: {
    defaultActiveIndex: {
      type: Number,
      required: true
    },
    // 获取的数组
    tableData: {
      type: Array,
      required: true
    },
    // 控制展示可以用,禁用数据多少个
    isShowNum: {
      type: Boolean,
      default: true
    }
  },
  data() {
    // this._props拿到父组件传过来的所有数据
    // formOfVehicle定义一个数据
    return {
      activeIndex: this._props.defaultActiveIndex || 0,
      formOfVehicle,
      zero: 11,
      one: 11,
      two: 22
    }
  },
  // 监听到数据过来子组件的时候做操作,可用和停用的数据是固定的
  // watch: {
  //   'tableData': {
  //     handler(oldval, newval) {
  //       // console.log(this.tableData)
  //       // console.log(val)
  //       // this.zero = newval.filter(item => item.workStatus === 0).length
  //       // this.one = newval.filter(item => item.workStatus === 1).length
  //       this.two = newval.total
  //     },
  //     deep: true
  //     // immediate: true
  //   }
  // },
  mounted() {
    // this.formOfVehicle = [...this.formOfVehicle, ...this.settingList]
    // const res = getUseCarSuccess()
    // console.log(res)
    this.loadCarTypeStatics()
  },
  methods: {
    tabChange(workStatus) {
      this.activeIndex = workStatus
      this.$emit('tabChange', workStatus)
    },
    // 获取统计车辆信息
    async loadCarTypeStatics() {
      const { data: res } = await getCarTypeStatics()
      this.zero = res[0] || 0
      this.one = res[1] || 0
      this.two = parseInt(res[1]) + parseInt(res[0])
    }
  }
}
</script>
<style lang="scss">
.tabchange-card {
  height: 60px;
  // margin-top: 0px;
  .el-card__body {
    padding: 0px;
  }
  .tab-change {
    display: flex;
    border-radius: 4px;

    .tab-item {
      width: 120px;
      height: 60px;
      text-align: center;
      line-height: 60px;
      color: #333;
      font-size: 16px;
      background-color: white;

      cursor: pointer;
      .special-item {
        .el-badge__content {
          width: 20px;
          padding: 0 5px;
        }
      }
      .item {
        .el-badge__content {
          background-color: #fd3333 !important;
          line-height: 18px;
          height: auto;
          min-width: 18px;
          min-height: 18px;
          // border-radius: 50%;
        }
        .el-badge__content.is-fixed {
          top: 14px;
          right: 2px;
        }
      }
    }
    .active {
      background-color: #ffeeeb;
      color: #e15536;
    }
  }
}
</style>
